<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .todo-item{
      display: flex;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>任务列表</h1>
  <div>
    <!--通过属性来指定自定义的值-->
    <todo-item task="需求分析"></todo-item>
    <todo-item task="概要设计"></todo-item>
    <todo-item task="详细设计"></todo-item>
    <todo-item task="开发功能"></todo-item>
  </div>

</div>


<template id="todo-item-template">
  <div class="todo-item">
    <input type="checkbox" v-model="completed">
    <span v-if="!editable" @dblclick="fn">{{task}}</span>
    <input v-else type="text" v-model="taskName" @blur="fn2">
  </div>
</template>

<script src="js/vue.js"></script>
<script>
  // 定义全局组件
  Vue.component("todo-item",{
    // 组件中的数据部门必须是函数的方式返回
    data:function () {
      return {
        completed: false,
        taskName: this.task,
        editable: false
      }
    },
    // 定义属性：
    props: ["task"],
    methods:{
      fn:function () {
          this.editable = true;
      },
      fn2:function () {
        this.editable = false;
      }
    },
    // 组件的模板，除了直接写内容结构之外，也可以写一个选择器
    template:"#todo-item-template"
  });

  var vm = new Vue( {
    el: "#app",
    data:{
      message: "hello!"
    },
    methods:{},
    computed:{},
    created:function () {},
    watch:{},
    filters:{}
  } );

</script>
</body>
</html>
